import { defineStore } from 'pinia';

export const useLayoutStore = defineStore('layout', {
  state: () => {
    return {
      isCollapse: false,
      isTempExpanded: false,
      sidebarWidth: {
        collapsed: 64, // 更窄的折叠宽度
        expanded: 220, // 完全展开宽度
        tempExpanded: 180, // 临时展开宽度
      },
      collapsedTextVisibility: false, // 控制折叠时文字是否可见
    };
  },
  actions: {
    // 设置折叠状态
    setCollapse(state) {
      this.isCollapse = state;
      this.isTempExpanded = false;
      this.collapsedTextVisibility = false;
    },

    // 切换折叠状态
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.isTempExpanded = false;
      this.collapsedTextVisibility = false;
    },

    // 临时扩展
    setTempExpand(state) {
      if (this.isCollapse) {
        this.isTempExpanded = state;
        this.collapsedTextVisibility = state;
      }
    },
  },
  getters: {
    // 计算当前侧边栏宽度
    currentSidebarWidth() {
      if (this.isTempExpanded) {
        return `${this.sidebarWidth.tempExpanded}px`;
      }
      return this.isCollapse ? `${this.sidebarWidth.collapsed}px` : `${this.sidebarWidth.expanded}px`;
    },
  },
});
